{% extends 'user/base_login_regidter.html' %}

{% block title %}用户注册{% endblock %}

{% block form %}
    <h2>🎵 加入我们</h2>
    <form action="" method="post">
     {% csrf_token %}
        <div class="form-group">
            <label for="id_email">邮箱</label>
            <input type="email" name="email" id="id_email" class="form-control" placeholder="请输入邮箱地址" required>
            {% if form.email.errors %}
                {% for error in form.email.errors  %}
                    <p class="text-danger">{{ error }}</p>
                {% endfor %}
            {% endif %}
        </div>
        <div class="form-group">
            <label for="id_password">密码</label>
            <input type="password" name="password" id="id_password" class="form-control" placeholder="请输入密码" required>
            <div class="password-strength">
                <div class="password-strength-bar"></div>
            </div>
            {% if form.password.errors %}
                {% for error in form.password.errors  %}
                    <p class="text-danger">{{ error }}</p>
                {% endfor %}
            {% endif %}
        </div>
        <div class="form-group">
            <label for="id_password2">确认密码</label>
            <input type="password" name="password2" id="id_password2" class="form-control" placeholder="请再次输入密码" required>
            {% if form.password2.errors %}
                {% for error in form.password2.errors  %}
                    <p class="text-danger">{{ error }}</p>
                {% endfor %}
            {% endif %}
        </div>

        <div class="form-group">
            <label for="id_captcha_1">验证码</label>
            <div class="captcha-container">
                {{ form.captcha }}
            </div>
            {% if form.captcha.errors %}
                {% for error in form.captcha.errors  %}
                    <p class="text-danger">{{ error }}</p>
                {% endfor %}
            {% endif %}
        </div>

        <div class="auth-buttons">
            <button type="submit" class="btn-primary">🚀 注册</button>
            <a href="{% url 'user:login' %}" class="btn-secondary">🔙 返回登录</a>
        </div>
    </form>

{% endblock %}

{% block js %}
    <script>
    // 验证码点击刷新功能
    $(document).ready(function() {
        $('.captcha').click(function () {
            $.getJSON("/captcha/refresh/", function (result) {
                $('.captcha').attr('src', result['image_url']);
                $('#id_captcha_0').val(result['key']);
            });
        });
    });
    </script>
{% endblock %}